<template>
  <div class="guangdong" id="guangdong" ref="guangdong">
  </div>
</template>

<script>
// 导入 echarts
import * as echarts from 'echarts'
// 引入广东省地图
import GuangDong from '../../public/guangdong.json'
// 注册广东省地图
echarts.registerMap('GuangDong', GuangDong)
export default {
  name: 'GuangDong',
  data() {
    return {}
  },
  methods: {
    // 初始化广东地图echart
    initGuanDongmap() {
      // 初始化 echarts
      const guandongDOM = this.$refs.guangdong
      const gd = echarts.init(guandongDOM)
      // 广东省配置
      // 中国地图参数配置
      const guangdongMapOption = {
        tooltip: {
          show: true
        },
        geo: {
          map: 'GuangDong',
          roam: false, // 一定要关闭拖拽
          zoom: 0.9,
          label: {
            normal: {
              show: true, // 关闭省份名展示
              fontSize: '10',
              color: '#ffffff'
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#0d0059',
              borderColor: '#389dff',
              borderWidth: 1, // 设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: '#01012a'
            },
            emphasis: {
              areaColor: '#184cff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      }
      // 广东省地图
      gd.setOption(guangdongMapOption)
    }
  },
  created() {
    this.$nextTick(() => {
      this.initGuanDongmap()
    })
  }
}
</script>

<style lang="less" scoped>
.guangdong {
  width: 100%;
  height: 100%;
  padding: 0 0 50px 10px;
}
</style>
